<template>
  <div class="mine">
    <h4>饿了么</h4>
    <div class="user">
      <div class="left">
        <!-- <img :src="userinfo.avatarUrl" alt="" /> -->
      </div>
      <div class="middle">
        <div class="username">
          <!-- {{userinfo.id}} -->
        </div>
        <!-- <div class="phone">{{userinfo.phone}}</div> -->
      </div>
      <div class="right">
        <button>账户设置</button>
      </div>
    </div>
    <div class="eatcar">吃货卡</div>
    <div class="money">
      <div class="redbag">红包</div>
      <div class="balance">余额</div>
    </div>
    <div class="utils">
      <h5>常用工具</h5>
      <div class="opts">
        <div class="addr" @click="addressClick">我的地址</div>
        <div class="kefu">我的客服</div>
        <div class="follow" @click="collectClick">店铺关注</div>
        <div class="evaluate">评价有礼</div>
      </div>
    </div>
    <div class="show">
      <div class="invite">
        <h5>邀好友赚现金</h5>
        <div class="desc">
          最高得15元
        </div>
        <div class="content"></div>
        <div class="btn">
          <button>去邀请</button>
          <button>查佣金</button>
        </div>
      </div>
      <div class="serviceNo">
        <h5>饿了么服务号</h5>
        <div class="desc">
          关注后及时接收系统通知
        </div>
        <div class="content"></div>
        <div class="btn">
          <button>立即关注</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// let userinfo=ref({})
let $router = useRouter();
let addressClick=()=>{
  $router.push('/address')
}
let collectClick=()=>{
  $router.push('/collect')
}
/* onMounted(()=>{
  userinfo.value=JSON.parse(localStorage.getItem('userinfo'))
}) */
</script>


<style scoped>
.mine {
  height: 550px;
  padding: 0 10px;
  background-color: gainsboro;
  overflow-y: auto;
}
::-webkit-scrollbar{
  display: none;
}
h4{
  height: 40px;
  line-height: 40px;
}
.user{
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left{
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 50%;
}
.left img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.middle{
  flex: 1;
}
.username{
  margin-bottom: 20px;
  font-weight: 700;
}
.phone{
  font-size: 12px;
  color: gray;
}
.right button{
  width: 80px;
  height: 30px;
  border-radius: 20px;
  border: 1px solid gray;
}
.eatcar{
  height: 60px;
  border-radius: 5px;
  color: white;
  padding: 10px;
  margin: 10px 0;  
  background: linear-gradient(to right,rgba(0, 89, 255, 0.899),rgb(97, 196, 228));
}
.money{
  height: 70px;
  border-radius: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: 700;
  background-color: #fff;
}
.utils{
  height: 100px;
  background-color: #fff;
  margin: 10px 0;
  padding: 0 10px;
}
h5{
  height: 40px;
  line-height: 40px; 
}
.opts{
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.opts div{
  cursor: pointer;
}
.show{
  height: 200px;
  display: flex;
  justify-content: space-between;
}
.invite,.serviceNo{
  width: 165px;
  height: 200px;
  border-radius: 5px;
  padding: 0 10px;
  background-color: #fff;
}
.desc{
  height: 30px;
  line-height: 20px;
  font-size: 12px;
  color: gray; 
}
.content{
  width: 100%;
  height: 80px;
  border-radius: 2px;
  background-color: gainsboro;
}
.btn{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn button{
  width: 70px;
  height: 24px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid gray;
  font-size: 12px;
}
</style>